<template>
    <view class="actconBoxCom" @click="toDetails(item)">
        <view class="pobox">
            <image class="actimg" :src="imagelist(item.Images)[0]" mode="aspectFill"></image>
            <image v-if="itme.Status == 3" class="endimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722498273000623.png"></image>
        </view>
        
        <view class="actright">
            <view class="actname">{{ $util.entitiesToUtf16(item.Title) }}</view>
            <view>
                <view class="actgup">
                    <image class="actgupimg"
                        src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722252582451895.png"></image>
                    <view class="actguptext">{{ getTime2(item.ServerDate) + " " + getWeek(item.ServerDate)
                        + item.ServerTime }}</view>
                </view>
                <view class="actgup">
                    <image class="actgupimg"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png">
                    </image>
                    <view class="actguptext hiddenText">{{ item.Place?item.Place:'' }}</view>
                </view>
                <view class="actgup2">
                    <view class="peoplenum">{{ item.Distance ? item.Distance + 'km' : '0km' }}</view>
                    <view class="peopelbox">
                        <view class="peoplenum">{{ item.Item?item.Item.length:'0'}}人</view>
                        <view class="imgbox" v-if="imglist1(item.Item).length > 0">
                            <image class="peoImg" v-for="(value, index) in imglist1(item.Item)" :key="index"
                                :src="value.HeadImgUrl" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            default: {},
            typeof: Object
        },
    },
    data() {
        return {

        };
    },
    methods: {
        imagelist(Images) {
            if(Images){
                let imglist = Images.split(',')
                return imglist
            }else{
                return ''
            }

        },
        imglist1(e) {
            if(e){
               let list = e.slice(0, 6)
                return list 
            }else{
                return ''
            }
            
        },
        getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            return this.$u.date(timestamp, 'mm-dd');
        },
        toDetails(item) {
            this.nav_to(`/pages/ball/ball_details?id=${item.ID}`);
        },

    }
}
</script>

<style lang="less">
.pobox{
    position: relative;
}
.endimg{
    width: 160rpx;
    height: 144rpx;
    position: absolute;
    top: 50%;
    left: 12px;
    // transform: translateX(-50%);
    transform: translateY(-50%);
}
.actconBoxCom {
    // width: 702rpx;
    width: 100%;
    height: fit-content;
    padding: 24rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .actimg {
        width: 200rpx;
        height: 280rpx;
        border-radius: 16rpx;
        // background-color: red;
    }

    .actright {
        flex: 1;
        padding: 24rpx;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .actname {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 76rpx;
        }

        .actgup {
            display: flex;
            margin-bottom: 8rpx;

            .actgupimg {
                width: 32rpx;
                height: 34rpx;
                margin-right: 4rpx;
            }

            .actguptext {
                font-size: 24rpx;
                color: #999999;
                // flex: 1;
                width: 320rpx;
            }
        }

        .actgup2 {
            display: flex;
            margin-top: 26rpx;
            justify-content: space-between;
            align-items: center;

            .peopelbox {
                display: flex;
                align-items: center;
            }

            .peoplenum {
                font-size: 20rpx;
                color: #999999;
                margin-right: 16rpx;
            }

            .imgbox {
                display: flex;

                .peoImg {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    margin-left: -9rpx;
                }
            }

        }
    }
}
</style>
